import { ReactElement } from 'react'
import style from './index.module.less'

interface Props {
  name: string
  value: number | string
  color: string
  percent: string
  unit: string
}

function Main ({ name, value, color, percent, unit }: Props): ReactElement {
  return (
    <li>
      <span className={style['li-left']}>
        <span className={style['li-icon']} style={{ color }} />
        <span className={style['li-text']}>{name}</span>
        <span className={style['li-percent']}>{percent}</span>
      </span>
      <span className={style['li-right']}>{value}{unit}</span>
    </li>
  )
}

export default Main
